<template>
    <div class="addEdit-block" :style='{"padding":"30px","margin":"0"}'>
        <el-form
                :style='{"border":"1px solid rgba(167, 180, 201,.3)  ","padding":"30px","borderRadius":"6px","background":"#fff"}'
                class="add-update-preview"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
        >
            <template>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="活动名称"
                              prop="designation">
                    <el-input v-model="ruleForm.designation" placeholder="活动名称" clearable :readonly="ro.designation"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="活动名称" prop="designation">
                    <el-input v-model="ruleForm.designation" placeholder="活动名称" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="活动类型"
                              prop="yundongmingcheng">
                    <el-input v-model="ruleForm.yundongmingcheng" placeholder="活动类型" clearable
                              :readonly="ro.yundongmingcheng"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="活动类型"
                              prop="yundongmingcheng">
                    <el-input v-model="ruleForm.yundongmingcheng" placeholder="活动类型" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="upload" v-if="type!='info' && !ro.tupian"
                              label="图片" prop="tupian">
                    <file-upload
                            tip="点击上传图片"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
                            @change="tupianUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="upload" v-else-if="ruleForm.tupian" label="图片"
                              prop="tupian">
                    <img v-if="ruleForm.tupian.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;"
                         v-bind:key="index" :src="ruleForm.tupian.split(',')[0]" width="100" height="100">
                    <img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
                         v-for="(item,index) in ruleForm.tupian.split(',')" :src="$base.url+item" width="100"
                         height="100">
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="比赛时间"
                              prop="bisaishijian">
                    <el-input v-model="ruleForm.bisaishijian" placeholder="比赛时间" clearable
                              :readonly="ro.bisaishijian"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="比赛时间" prop="bisaishijian">
                    <el-input v-model="ruleForm.bisaishijian" placeholder="比赛时间" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="参赛地点"
                              prop="cansaididian">
                    <el-input v-model="ruleForm.cansaididian" placeholder="参赛地点" clearable
                              :readonly="ro.cansaididian"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="参赛地点" prop="cansaididian">
                    <el-input v-model="ruleForm.cansaididian" placeholder="参赛地点" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="教师工号"
                              prop="jiaoshigonghao">
                    <el-input v-model="ruleForm.jiaoshigonghao" placeholder="教师工号" clearable
                              :readonly="ro.jiaoshigonghao"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="教师工号" prop="jiaoshigonghao">
                    <el-input v-model="ruleForm.jiaoshigonghao" placeholder="教师工号" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="教师姓名"
                              prop="jiaoshixingming">
                    <el-input v-model="ruleForm.jiaoshixingming" placeholder="教师姓名" clearable
                              :readonly="ro.jiaoshixingming"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="教师姓名" prop="jiaoshixingming">
                    <el-input v-model="ruleForm.jiaoshixingming" placeholder="教师姓名" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="手机号码"
                              prop="shoujihaoma">
                    <el-input v-model="ruleForm.shoujihaoma" placeholder="手机号码" clearable
                              :readonly="ro.shoujihaoma"></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="手机号码" prop="shoujihaoma">
                    <el-input v-model="ruleForm.shoujihaoma" placeholder="手机号码" readonly></el-input>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="date" v-if="type!='info'" label="报名时间"
                              prop="baomingshijian">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="ruleForm.baomingshijian"
                            type="datetime"
                            :readonly="ro.baomingshijian"
                            placeholder="报名时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-else-if="ruleForm.baomingshijian"
                              label="报名时间" prop="baomingshijian">
                    <el-input v-model="ruleForm.baomingshijian" placeholder="报名时间" readonly></el-input>
                </el-form-item>
            </template>
            <el-form-item :style='{"padding":"0","margin":"0"}' class="btn">
                <el-button class="btn3" v-if="type!='info'" type="success" @click="onSubmit">
                    <span class="icon iconfont icon-tijiao20"
                          :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                    提交
                </el-button>
                <el-button class="btn4" v-if="type!='info'" type="success" @click="back()">
                    <span class="icon iconfont icon-quxiao16"
                          :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                    取消
                </el-button>
                <el-button class="btn5" v-if="type=='info'" type="success" @click="back()">
                    <span class="icon iconfont icon-fanhui21"
                          :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                    返回
                </el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    // 数字，邮件，手机，url，身份证校验
    import {isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard} from "@/utils/validate";

    export default {
        data() {
            let self = this
            var validateIdCard = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!checkIdCard(value)) {
                    callback(new Error("请输入正确的身份证号码"));
                } else {
                    callback();
                }
            };
            var validateUrl = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isURL(value)) {
                    callback(new Error("请输入正确的URL地址"));
                } else {
                    callback();
                }
            };
            var validateMobile = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isMobile(value)) {
                    callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isPhone(value)) {
                    callback(new Error("请输入正确的电话号码"));
                } else {
                    callback();
                }
            };
            var validateEmail = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isEmail(value)) {
                    callback(new Error("请输入正确的邮箱地址"));
                } else {
                    callback();
                }
            };
            var validateNumber = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isNumber(value)) {
                    callback(new Error("请输入数字"));
                } else {
                    callback();
                }
            };
            var validateIntNumber = (rule, value, callback) => {
                if (!value) {
                    callback();
                } else if (!isIntNumer(value)) {
                    callback(new Error("请输入整数"));
                } else {
                    callback();
                }
            };
            return {
                id: '',
                type: '',


                ro: {
                    designation: false,
                    yundongmingcheng: false,
                    tupian: false,
                    bisaishijian: false,
                    cansaididian: false,
                    jiaoshigonghao: false,
                    jiaoshixingming: false,
                    shoujihaoma: false,
                    baomingshijian: false,
                    crossuserid: false,
                    crossrefid: false,
                },


                ruleForm: {
                    designation: '',
                    yundongmingcheng: '',
                    tupian: '',
                    bisaishijian: '',
                    cansaididian: '',
                    jiaoshigonghao: '',
                    jiaoshixingming: '',
                    shoujihaoma: '',
                    baomingshijian: '',
                    crossuserid: '',
                    crossrefid: '',
                },


                rules: {
                    yundongmingcheng: [
                        {required: true, message: '活动类型不能为空', trigger: 'blur'},
                    ],
                    tupian: [],
                    bisaishijian: [],
                    cansaididian: [],
                    jiaoshigonghao: [],
                    jiaoshixingming: [],
                    shoujihaoma: [],
                    baomingshijian: [],
                    crossuserid: [],
                    crossrefid: [],
                }
            };
        },
        props: ["parent"],
        computed: {},
        components: {},
        created() {
            this.ruleForm.baomingshijian = this.getCurDateTime()
        },
        methods: {

            // 下载
            download(file) {
                window.open(`${file}`)
            },
            // 初始化
            init(id, type) {
                if (id) {
                    this.id = id;
                    this.type = type;
                }
                if (this.type == 'info' || this.type == 'else') {
                    this.info(id);
                } else if (this.type == 'logistics') {
                    this.logistics = false;
                    this.info(id);
                } else if (this.type == 'cross') {
                    var obj = this.$storage.getObj('crossObj');
                    for (var o in obj) {
                        if (o == 'yundongmingcheng') {
                            this.ruleForm.yundongmingcheng = obj[o];
                            this.ro.yundongmingcheng = true;
                            continue;
                        }
                        if (o == 'tupian') {
                            this.ruleForm.tupian = obj[o];
                            this.ro.tupian = true;
                            continue;
                        }
                        if (o == 'bisaishijian') {
                            this.ruleForm.bisaishijian = obj[o];
                            this.ro.bisaishijian = true;
                            continue;
                        }
                        if (o == 'cansaididian') {
                            this.ruleForm.cansaididian = obj[o];
                            this.ro.cansaididian = true;
                            continue;
                        }
                        if (o == 'jiaoshigonghao') {
                            this.ruleForm.jiaoshigonghao = obj[o];
                            this.ro.jiaoshigonghao = true;
                            continue;
                        }
                        if (o == 'jiaoshixingming') {
                            this.ruleForm.jiaoshixingming = obj[o];
                            this.ro.jiaoshixingming = true;
                            continue;
                        }
                        if (o == 'shoujihaoma') {
                            this.ruleForm.shoujihaoma = obj[o];
                            this.ro.shoujihaoma = true;
                            continue;
                        }
                        if (o == 'baomingshijian') {
                            this.ruleForm.baomingshijian = obj[o];
                            this.ro.baomingshijian = true;
                            continue;
                        }
                        if (o == 'crossuserid') {
                            this.ruleForm.crossuserid = obj[o];
                            this.ro.crossuserid = true;
                            continue;
                        }
                        if (o == 'crossrefid') {
                            this.ruleForm.crossrefid = obj[o];
                            this.ro.crossrefid = true;
                            continue;
                        }
                    }


                }

                // 获取用户信息
                this.$http({
                    url: `${this.$storage.get('sessionTable')}/session`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {

                        var json = data.data;
                        if (((json.jiaoshigonghao != '' && json.jiaoshigonghao) || json.jiaoshigonghao == 0) && this.$storage.get("role") != "管理员") {
                            this.ruleForm.jiaoshigonghao = json.jiaoshigonghao
                            this.ro.jiaoshigonghao = true;
                        }
                        if (((json.jiaoshixingming != '' && json.jiaoshixingming) || json.jiaoshixingming == 0) && this.$storage.get("role") != "管理员") {
                            this.ruleForm.jiaoshixingming = json.jiaoshixingming
                            this.ro.jiaoshixingming = true;
                        }
                        if (((json.shoujihaoma != '' && json.shoujihaoma) || json.shoujihaoma == 0) && this.$storage.get("role") != "管理员") {
                            this.ruleForm.shoujihaoma = json.shoujihaoma
                            this.ro.shoujihaoma = true;
                        }
                    } else {
                        this.$message.error(data.msg);
                    }
                });


            },
            // 多级联动参数

            info(id) {
                this.$http({
                    url: `jiaoshibaomingxinxi/info/${id}`,
                    method: "get"
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.ruleForm = data.data;
                        //解决前台上传图片后台不显示的问题
                        let reg = new RegExp('../../../upload', 'g')//g代表全部
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            },


            // 提交
            onSubmit() {


                if (this.ruleForm.tupian != null) {
                    this.ruleForm.tupian = this.ruleForm.tupian.replace(new RegExp(this.$base.url, "g"), "");
                }


                var objcross = this.$storage.getObj('crossObj');
                //更新跨表属性
                var crossuserid;
                var crossrefid;
                var crossoptnum;
                if (this.type == 'cross') {
                    var statusColumnName = this.$storage.get('statusColumnName');
                    var statusColumnValue = this.$storage.get('statusColumnValue');
                    if (statusColumnName != '') {
                        var obj = this.$storage.getObj('crossObj');
                        if (statusColumnName && !statusColumnName.startsWith("[")) {
                            for (var o in obj) {
                                if (o == statusColumnName) {
                                    obj[o] = statusColumnValue;
                                }
                            }
                            var table = this.$storage.get('crossTable');
                            this.$http({
                                url: `${table}/update`,
                                method: "post",
                                data: obj
                            }).then(({data}) => {
                            });
                        } else {
                            crossuserid = this.$storage.get('userid');
                            crossrefid = obj['id'];
                            crossoptnum = this.$storage.get('statusColumnName');
                            crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
                        }
                    }
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        if (crossrefid && crossuserid) {
                            this.ruleForm.crossuserid = crossuserid;
                            this.ruleForm.crossrefid = crossrefid;
                            let params = {
                                page: 1,
                                limit: 10,
                                crossuserid: this.ruleForm.crossuserid,
                                crossrefid: this.ruleForm.crossrefid,
                            }
                            this.$http({
                                url: "jiaoshibaomingxinxi/page",
                                method: "get",
                                params: params
                            }).then(({
                                         data
                                     }) => {
                                if (data && data.code === 0) {
                                    if (data.data.total >= crossoptnum) {
                                        this.$message.error(this.$storage.get('tips'));
                                        return false;
                                    } else {
                                        this.$http({
                                            url: `jiaoshibaomingxinxi/${!this.ruleForm.id ? "save" : "update"}`,
                                            method: "post",
                                            data: this.ruleForm
                                        }).then(({data}) => {
                                            if (data && data.code === 0) {
                                                this.$message({
                                                    message: "操作成功",
                                                    type: "success",
                                                    duration: 1500,
                                                    onClose: () => {
                                                        this.parent.showFlag = true;
                                                        this.parent.addOrUpdateFlag = false;
                                                        this.parent.jiaoshibaomingxinxiCrossAddOrUpdateFlag = false;
                                                        this.parent.search();
                                                        this.parent.contentStyleChange();
                                                    }
                                                });
                                            } else {
                                                this.$message.error(data.msg);
                                            }
                                        });

                                    }
                                } else {
                                }
                            });
                        } else {
                            this.$http({
                                url: `jiaoshibaomingxinxi/${!this.ruleForm.id ? "save" : "update"}`,
                                method: "post",
                                data: this.ruleForm
                            }).then(({data}) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: "操作成功",
                                        type: "success",
                                        duration: 1500,
                                        onClose: () => {
                                            this.parent.showFlag = true;
                                            this.parent.addOrUpdateFlag = false;
                                            this.parent.jiaoshibaomingxinxiCrossAddOrUpdateFlag = false;
                                            this.parent.search();
                                            this.parent.contentStyleChange();
                                        }
                                    });
                                } else {
                                    this.$message.error(data.msg);
                                }
                            });
                        }
                    }
                });
            },
            // 获取uuid
            getUUID() {
                return new Date().getTime();
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.jiaoshibaomingxinxiCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            tupianUploadChange(fileUrls) {
                this.ruleForm.tupian = fileUrls;
            },
        }
    };
</script>
<style lang="scss" scoped>
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }

    .search-box {
        position: absolute;
    }

    .el-date-editor.el-input {
        width: auto;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__label {
        padding: 0 10px 0 0;
        color: #374254;
        font-weight: 600;
        width: 80px;
        font-size: 14px;
        line-height: 40px;
        text-align: right;
    }

    .add-update-preview .el-form-item /deep/ .el-form-item__content {
        margin-left: 80px;
    }

    .add-update-preview .el-input /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #a7b4c9;
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-input-number /deep/ .el-input__inner {
        text-align: left;
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #a7b4c9;
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-input-number /deep/ .el-input-number__decrease {
        display: none;
    }

    .add-update-preview .el-input-number /deep/ .el-input-number__increase {
        display: none;
    }

    .add-update-preview .el-select /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 10px;
        outline: none;
        color: #a7b4c9;
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .el-date-editor /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 10px 0 30px;
        outline: none;
        color: #a7b4c9;
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview /deep/ .el-upload--picture-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        width: auto;
        height: auto;
        line-height: initial;
        vertical-align: middle;
    }

    .add-update-preview /deep/ .upload .upload-img {
        border: 2px dashed rgba(167, 180, 201, .3);
        cursor: pointer;
        border-radius: 6px;
        color: #a7b4c9;
        width: 200px;
        font-size: 32px;
        line-height: 200px;
        text-align: center;
        height: 200px;
    }

    .add-update-preview /deep/ .el-upload-list .el-upload-list__item {
        border: 2px dashed rgba(167, 180, 201, .3);
        cursor: pointer;
        border-radius: 6px;
        color: #a7b4c9;
        width: 200px;
        font-size: 32px;
        line-height: 200px;
        text-align: center;
        height: 200px;
    }

    .add-update-preview /deep/ .el-upload .el-icon-plus {
        border: 2px dashed rgba(167, 180, 201, .3);
        cursor: pointer;
        border-radius: 6px;
        color: #a7b4c9;
        width: 200px;
        font-size: 32px;
        line-height: 200px;
        text-align: center;
        height: 200px;
    }

    .add-update-preview .el-textarea /deep/ .el-textarea__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 12px;
        outline: none;
        color: #a7b4c9;
        width: 400px;
        font-size: 14px;
        height: 120px;
    }

    .add-update-preview .btn .btn1 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #6574cd;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .btn .btn1:hover {
        opacity: 0.8;
    }

    .add-update-preview .btn .btn2 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #6574cd;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .btn .btn2:hover {
        opacity: 0.8;
    }

    .add-update-preview .btn .btn3 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .btn .btn3:hover {
        opacity: 0.8;
    }

    .add-update-preview .btn .btn4 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .btn .btn4:hover {
        opacity: 0.8;
    }

    .add-update-preview .btn .btn5 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .add-update-preview .btn .btn5:hover {
        opacity: 0.8;
    }
</style>
